<template>
	<view v-if="showGroupactiveinfo" class="ticket_page">
		<view class="ticket_box">
			<view class="ticket_bk_box">
				<image class="ticket_bk_img" :src="onlinePic+'zh_ticket_bk.png'" mode="widthFix"></image>
			</view>
			<view class="ticket_content_box">
				<view class="ticket_tabs_box">
					<view v-for="(item,index) in zhinfo.project_pay_type_arr" :key="item.id"
						:class="tabId==item.id?'ticket_tabs_cell ticket_tabs_cell_on':'ticket_tabs_cell'"
						@click="changeTabs(item.id,item.sign_status)">
						{{item.name}}
					</view>
				</view>
				<view v-if="sign_status==0" class="ticker_img_box">
					<image class="ticker_img" :src="picUrl+zhinfo.qr_code">
					</image>
					<view class="mt-5 f-12">未使用</view>
				</view>
				<view v-if="sign_status==1" class="ticker_img_box">
					<image class="ticker_img_def" :src="picUrl+zhinfo.qr_code">
					</image>
					<view class="mt-5 f-12">已使用</view>
				</view>
				<view class="ticket_userinfo_box">
					<view class="ticket_userinfo_cell">
						<view class="c-gray">姓名</view>
						<view class="">{{zhinfo.name}}</view>
					</view>
					<view class="ticket_userinfo_cell">
						<view class="c-gray">电话</view>
						<view class="">{{zhinfo.mobile}}</view>
					</view>
					<view class="ticket_userinfo_cell">
						<view class="c-gray">是否有车</view>
						<view class="">{{zhinfo.is_have_car==1?'有车':'无车'}}</view>
					</view>
					<block v-if="zhinfo.is_have_car==1">
						<view class="ticket_userinfo_cell" v-if="zhinfo.is_subaru==1">
							<view class="c-gray">车型</view>
							<view class="">{{zhinfo.car_series}}</view>
						</view>
						<view class="ticket_userinfo_cell" v-if="zhinfo.is_subaru==0">
							<view class="c-gray">品牌</view>
							<view class="">{{zhinfo.car_brand}}</view>
						</view>
						<view class="ticket_userinfo_cell">
							<view class="c-gray">车牌号</view>
							<view class="">{{zhinfo.car_number}}</view>
						</view>
						<view class="ticket_userinfo_cell">
							<view class="c-gray">随行人数</view>
							<view class="">{{zhinfo.man_num}}人</view>
						</view>
						<view class="ticket_userinfo_cell">
							<view class="c-gray">停车区域</view>
							<view class="">{{zhinfo.parking_lot}}</view>
						</view>
						<view class="ticket_userinfo_cell" v-if="zhinfo.project_pay_man_card.length>0">
							<view class="c-gray">巡游乘客</view>
							<view class="">
								<span v-for="(item,index) in zhinfo.project_pay_man_card" :key="item.id">{{item.name}}
									<block v-if="index<zhinfo.project_pay_man_card.length-1">、</block>
								</span>
							</view>
						</view>
					</block>
				</view>
				<view class=""></view>
				<view class=""></view>
				<view class=""></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getZHActiveInfo,
		submitZHActiveForm,
		getClubCarSeriesAll,
		noticeTemplate
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				huodong_id: '',
				channel: '',
				zhinfo: '',
				tablist: [],
				tabId: 1,
				sign_status: '',
				showGroupactiveinfo: true,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets.bottom +
					60 : 60,
				safeBottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? true : false,
				pageSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom + 140 : 150,
				bottomSafeArea: uni.getSystemInfoSync().safeAreaInsets.bottom ? uni.getSystemInfoSync().safeAreaInsets
					.bottom : 15
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				this.getZHActiveInfo()
			}
			if (uni.getStorageSync('onload')) {
				this.getZHActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.huodong_id = options.huodong_id ? options.huodong_id : ''
			this.channel = options.channel ? options.channel : ''
			uni.showLoading({})
			this.getZHActiveInfo()
			var params = {
				event_code: '车友会门票页',
				path: 'pages/group/groupzhactiveticket',
				event_id: this.huodong_id,
				title: '',
				source_page: '车友会门票页',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			changeTabs(id, status) {
				this.tabId = id
				this.sign_status = status
			},
			getZHActiveInfo() {
				getZHActiveInfo({
					huodong_id: this.huodong_id,
					channel: this.channel ? this.channel : ''
				}).then(res => {
					if (res.state == 1) {
						uni.hideLoading()
						this.zhinfo = res.data.info
						var project_type_arr = res.data.info.project_type_arr
						var festival_project_popup_arr = res.data.info.festival_project_popup_arr
						this.form_project_popup_arr = []
						festival_project_popup_arr.forEach(item => {
							item.isSelect = 0; // 初始全部设置为0
						});
						project_type_arr.forEach(value => {
							festival_project_popup_arr.forEach(item => {
								if (item.id === value) {
									item.isSelect = 1; // 如果相等，设置isSelect为1
									this.form_project_popup_arr.push(item)
								}
							});
						});
						this.zhinfo.festival_project_popup_arr = festival_project_popup_arr
						this.popImg = res.data.info.festival_popup_img
						this.huodong_join_id = res.data.info.huodong_join_id ? res.data.info.huodong_join_id : 0
						this.tablist = festival_project_popup_arr
						if (res.data.info.project_pay_type_arr.length > 0) {
							this.sign_status = res.data.info.project_pay_type_arr[0].sign_status
							this.tabId = res.data.info.project_pay_type_arr[0].id
						}
						this.showGroupactiveinfo = true
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
		},
		onPullDownRefresh() {
			if (uni.getStorageSync('access_token')) {
				this.getZHActiveInfo()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
			uni.stopPullDownRefresh()
		},
		onReachBottom() {

		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.zhinfo.share_poster_title,
				path: this.zhinfo.share_poster_url,
				imageUrl: this.zhinfo.share_poster_pic ? this.picUrl + this.zhinfo.share_poster_pic : ''
			}
		}
	}
</script>

<style lang="scss">
	.ticket_page {
		min-height: 100vh;
		background-color: #00A0DC;

		.ticket_box {
			position: relative;
			padding: 30rpx 16rpx;

			.ticket_bk_box {
				position: absolute;
				top: 30rpx;
				left: 16rpx;
				right: 16rpx;
				z-index: 1;

				.ticket_bk_img {
					width: 100%;

				}
			}

			.ticket_content_box {
				position: absolute;
				top: 535rpx;
				left: 25rpx;
				right: 25rpx;
				z-index: 2;

				.ticket_tabs_box {
					display: flex;
					align-items: center;

					.ticket_tabs_cell {
						width: 33.333%;
						height: 55rpx;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.ticket_tabs_cell_on {
						color: #ffffff;
						background-color: #000000;
						border-top-left-radius: 8rpx;
						border-top-right-radius: 8rpx;
					}
				}

				.ticker_img_box {
					margin-top: 35rpx;
					text-align: center;

					.ticker_img {
						width: 190rpx;
						height: 190rpx;
					}

					.ticker_img_def {
						width: 190rpx;
						height: 190rpx;
						filter: grayscale(100%);
					}
				}

				.ticket_userinfo_box {
					padding: 0 20rpx;
					margin: 35rpx 32rpx 0 32rpx;
					border-top: 1rpx dotted #AEAEAE;

					.ticket_userinfo_cell {
						font-size: 28rpx;
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>